<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS选择器</title>
  <style>
    /* 标签选择器 */
    body {
      background: #cccc;
    }

    /* .代表的是class类选择器 */
    .primary-heading {
      color: blue;
    }

    /* #代表id选择器 */
    #welcome {
      background: #f4f4f4;
    }

    /* 使用逗号分隔实现多选择器 */
    #welcome,#about {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 5px;
    }

    /* 嵌套选择器 */
    #welcome p {
      font-size: 20px;
    }

    #about {
      color: white;
    }
  </style>
</head>
<body>
  <div id="welcome">
    <h2 class="primary-heading">米斯特吴</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Recusandae dolorem eveniet dolorum maxime sed natus veniam qui voluptatem itaque cumque! 
      Quos perspiciatis nobis animi suscipit, facilis dignissimos. Nemo, nisi voluptate!
    </p>
  </div>
  <div id="about">
    <h2>关于米斯特吴</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      Quod sunt, soluta possimus aliquid molestias aliquam beatae, 
      commodi nobis aperiam ea repellat provident adipisci rem reprehenderit? 
      Vitae suscipit nisi odit laborum?
    </p>
  </div>
</body>
</html>